<template>
  <div>
    <div id="centerMap" ref="centerMap" style="height:100vh;width:100vw;"/>
    <div class="cicle3"></div>
  </div>
</template>
<script>

import Sichuan from '@/components/map/Sichuan.json'
// import * as THREE from '../../assets/js/three.min'
// import * as d3 from '../../assets/js/d'
export default {
  name: 'Citys',
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let options = {
        animation: false,
        geo3D: {
          top:-400,
          label: {
            "show": true,
            "position": "center",
            textStyle: {
              color: '#fff',
              fontSize: 13,
              backgroundColor:"rgba(0,0,0,0)",
              opacity: 1,
            },
          },

          type: 'map',
          map: 'Sichuan',
          viewControl: {
            distance: 180,
            alpha: 35, // 上下旋转的角度
            beta: 0, // 左右旋转的角度
            animation: true,
          },
          itemStyle:{
            color: "#4199f2", // 背景
            opacity: .4, //透明度
            borderWidth: 1, // 边框宽度
            borderColor: "#0ac1c7", // 边框颜色
          },
          roam: false,
        }
      }
      this.chart = this.$echarts.init(this.$refs.centerMap)
      this.$echarts.registerMap('Sichuan', Sichuan)
      this.chart.setOption(options, true)
    }
  }
};
</script>
<style lang="scss" scoped>
.cicle3 {
  width: 900px;
  height: 400px;
  background: url(../../assets/img/circle.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  left: 50%;
  bottom:38%;
  opacity: .4;
  z-index: -1;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 10s linear infinite;
}
@keyframes rotate3 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
  }
}
@keyframes rotate4 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
  }
}
</style>
